import {
  observable, autorun, makeObservable, computed, action, flow,
  makeAutoObservable, reaction, when,
} from 'mobx';

class Num {
  value
  constructor(value) {
    makeAutoObservable(this, {}, { autoBind: true });
    this.value = value;
  }
  get double() {
    return this.value * 2;
  }
  add() {
    this.value++;
  }
  *fetch() {
    let amount = yield new Promise((resolve) => setTimeout(() => resolve(5), 1000));
    this.value += amount;
  }
}

let num = new Num(1);

// 不会立刻执行，只有在值发生改变的时候才执行
// reaction(
//   () => num.value, // data函数，会返回一个值，这个值变化了，下面的effect函数才会执行
//   (value, previousValue) => console.log(value, previousValue) // effect
// );
// num.add();

// 第一个参数为条件，当为第一次变为true的时候就执行，只会执行一次
// when(() => num.value > 3, () => console.log(num.value));
// num.add();
// num.add();
// // 只有这次value值为4的时候when执行了
// num.add();
// num.add();
// num.add();

// when会返回一个方法，当执行这个方法表示取消等待
 const disposer = when(() => num.value > 3, () => console.log(num.value));
num.add();
num.add();
disposer(); // 这里我取消了等待，之后就算满足了when的条件也不会执行了
num.add();
num.add();
num.add();